<!DOCTYPE html>
<html> 
<!-- 元素节点 -->
<head lang="en">
    <meta charset="UTF-8">
    <title>DOM节点</title>
</head>
<body>
    <!-- src  alt  属性节点 -->
    <img src="images/fruit.jpg" alt="水果" id="fruit">
    <!-- 喜欢的水果 文本节点 -->
    <h1>喜欢的水果</h1>
    <p>DOM应用</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <table></table>
    <!-- 注释节点 -->
    <!-- 11111 -->
    <script>
        var ul = document.getElementsByTagName("ul")[0];
        console.log(ul);
        console.log(ul.parentNode);
        console.log(ul.childNodes); // 会获取到文本节点 换行或缩进导致的
        console.log(ul.firstChild);
        console.log(ul.firstElementChild); // 实际用这种
        console.log(ul.lastChild);

        // 先获取第一个子元素，再找到它相邻的下一个元素
        console.log(ul.firstChild.nextSibling); // 打印第二个li
        var li_ = document.createElement("li");
        li_.innerHTML = 4;
        ul.appendChild(li_);



    </script>
    <!-- <script>
        // document.getElementById
        let parent = document.getElementsByTagName("body"); // 使用标签名

        // parentNode 父节点

        // childNodes 子节点

        // first


        // last

        // next 下一个

        // previous 上一个
        // console.log(parent);
        // console.log(parent[0].childNodes);


    </script> -->

    <!-- parent  父   所有节点只有一个父节点
         child   子
         sibling 兄弟
    
    -->

    <!-- <script>
        //document.get
        // p
        var obj1 = document.getElementsByTagName("h1")[0].nextSibling;

        var obj2 = document.getElementsByTagName("h1")[0].nextElementSibling;  //nextElementSibling 可以屏蔽掉文本节点

        console.log(obj1);
        console.log(obj2);

        var body_ = document.getElementsByTagName("body")[0];
        console.log(body_.childNodes); // 返回一个集合

    </script> -->
</body>
</html>